<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }  
      .bg{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 100px;
        background-image: url("https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg");
        background-size: cover;
      }
      .header{
        width: 80%;
        height: 100px;
        margin: 0 auto;
        padding: 20px 0;
      }
      .header>img{
        height: 25px;
        float: left;
      }
      .longs{
        color: #777;
        font-size: 12px;
        float: right;
      }
      .longs span:nth-of-type(2){
        color: white;
        font-weight: bold;
        margin-left: 5px;
      }
      .content-img{
        display: block;
        margin: 0 auto;
      }
      .content-text{
        width: 970px;
        height: 50px;
        margin: 0 auto;
        margin-top: 50px;
        text-align: center;
      }
      .content-text>a{
        width: 170px;
        height: 50px;
        margin-left: 10px;
        background-color: #30c3ff;
        border-radius: 10px;
        text-decoration: none;
        float: left;
        color: white;
        line-height: 50px;
        text-align: center;
      }
      .title img{
        width: 25px;
        height: 25px;
        vertical-align: middle;
        margin-right: 10px;
      }
      .a{
        overflow: hidden;
        transition: all .5s;
      }
      .a:hover{
        height: 100px;
        margin-top: -25px;
      }
      .a:hover>img{
        display: none;
      }
      .a:hover>span{
        display: none;
      }
      .box{
        display: none;
      }
      .a:hover .box{
        display: block;
      }
  </style>
</head>
<body>
  <div class="bg">
    <div class="header">
      <img src="https://mdn.alipayobjects.com/huamei_gk2yv1/afts/img/A*D2VVQIehGhwAAAAAAAAAAAAADneBAQ/original">
      <img src="https://img.alicdn.com/tfs/TB1DeJxnAY2gK0jSZFgXXc5OFXa-86-64.png">
      <div class="longs">
        <span>我已有支付宝账户</span>
        <span>快速登录</span>
      </div>
    </div>
    <img class="content-img" src="https://img.alicdn.com/tps/TB1POhqIFXXXXXbXFXXXXXXXXXX.png">
    <div class="content-text">
      <a href="" class="title">
        <img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
        <span>我是服务商</span>
      </a>
      <a href="" class="title">
        <img src="https://zos.alipayobjects.com/rmsportal/neqhNGwxBXBmhVY.png">
        <span>我是开发者</span>
      </a>
      <a href="" class="title a">
        <img src="https://img.alicdn.com/tps/TB12JNkIFXXXXXBXXXXXXXXXXXX.png">
        <span>我是商家用户</span>
        <div class="box">
          <span>我是支付宝商家</span>
          <hr>
          <span>我是口碑商家</span>
        </div>
      </a>
      <a href="" class="title">
        <img src="https://gw.alipayobjects.com/mdn/rms_cfbd2a/afts/img/A*TQ_dRJ8sBb4AAAAAAAAAAAAAARQnAQ">
        <span>我是机构用户</span>
      </a>
      <a href="" class="title">
        <img src="https://img.alicdn.com/tps/TB1uh30IpXXXXXKXVXXXXXXXXXX.png">
        <span>我是个人用户</span>
      </a>
    </div>
  </div>
</body>
</html>